<template>
	<view class="zy_cell_container">
		<view :class="title?'zy_cell_title':''">
			<text>{{title}}</text>
		</view>
		<view :class="type==='list'?'zy_cell_list':'zy_cell_group'">
			<view v-for="(item,index) in cellList">
				<view :class="type==='list'?'zy_cell_itemList':'zy_cell_itemGroup'" @tap="clickHandler(item,index)">
					<!-- 左侧图标：自定义iconfont中图标；自定义图标样式（默认图标大小2；颜色#222） -->
					<i :class='item.iconfont' :style="item.iconStyle ||'color:#222'" class="zy_cell_icon"></i>
					<!-- 右侧内容：数组中最后一行没下划线 -->
					<view
						:class="index===cellList.length - 1?'zy_cell_noBorder':'zy_cell_border' &&type==='list'?'zy_cell_border':'zy_cell_noBorder'">
						<!-- 名称 -->
						<view class="zy_cell_text">{{item.text}}</view>
						<!-- 后置：自定义图标和文本 -->
						<view class="zy_cell_suf" v-if="item.sufText||item.sufIcon"
							@click.stop="rightHandler(item,index)">
							<view v-if="item.sufText">{{item.sufText}}</view>
							<view class="zy_cell_suf_content">
							<i :class='item.sufIcon'
								:style="item.sufIconStyle ||'color:#999'" v-if="item.sufIcon"></i>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ['clickHandler', 'rightHandler'],
		props: {
			title: {
				type: String,
			},
			type: {
				type: String,
				default: 'list'
			},
			cellList: {
				type: Array,
			},
		},
		data() {
			return {}
		},
		methods: {
			//单击事件
			clickHandler(item, index) {
				//存在url，跳转url页面
				if (item.url) {
					uni.navigateTo({
						url: item.url
					})
				}
				this.$emit('clickHandler', {
					item: item,
					index: index
				})
			},
			// 右侧事件
			rightHandler(item, index) {
				this.$emit('rightHandler', {
					item: item,
					index: index
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>